﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="MealPlanDetails.aspx.cs" Inherits="MealPlanDetails" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <link href="js/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
<style>
ul.ulimg{margin:0;}
</style>
 <script type="text/javascript">
     $(document).ready(function () {
         jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
         loadRecipes();
     });
     function loadRecipes() {
         var MealPlanId = getUrlVars()["MealPlanId"];
         //alert(MealPlanId);
         if (MealPlanId != null) {
             $.ajax({
                 type: "POST",
                 url: "PIMService.asmx/GetRecipeUserByMealPlan",
                 data: "{'MealPlanId':'" + MealPlanId + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (response) {
                     //alert(response.d);
                     BindRecipe(response);
                 },
                 error: function (msg) {
                     //                    alert(msg.constructor) 
                 }
             });
         }
     }
     function getUrlVars() {
         var vars = [], hash;
         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
         for (var i = 0; i < hashes.length; i++) {
             hash = hashes[i].split('=');
             vars.push(hash[0]);
             vars[hash[0]] = hash[1];
         }
         return vars;
     }

     function RemoveIngredient(recipeId) {
         if (confirm('Do you want to remove this Recipe?')) {
             $("#li_" + recipeId + "").remove();
             //alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
             document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value.replace(recipeId + ',', '');
             //alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
         }
     }

     function ViewRecipeFullView(recipeToView) {
         self.location = "NewRecipe.aspx?RecipeId=" + recipeToView + "";
     }

     function BindRecipe(response) {
         var recipe = response.d;
         //alert(recipe.length);
         var html = "";
         var userid = '<%=Session["Userid"]%>';
         document.getElementById("<% =hdRecipeId.ClientID %>").value = "";
         for (var i = 0; i < recipe.length; i++) {
             var varObjectID = recipe[i].RecipeID;

             var varObjectName;
             var varObjectNameFull;
             if (recipe[i].RecipeName != null) {

                 varObjectName = recipe[i].RecipeName.substring(0, 10);
                 if (varObjectName.length > 10) varObjectName = varObjectName + ' ..';
                 varObjectNameFull = recipe[i].RecipeName;
             }
             else {
                 varObjectName = 'No Name..';
                 varObjectNameFull = 'No Name';
             }
             var varObjectImage = recipe[i].RecipeImage;
             if (varObjectImage != null) {
                 var recipeID = varObjectID + ',';
                 document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value + recipeID + ',';
                 html += '<li id="li_' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image">'
                 html += '<a id="' + varObjectID + '">' + varObjectName + '</a>';
                 html += '<img class="tooltip li-recipe-image"  id="' + varObjectID + '" alt="" serving="' + 1000 + '" src="../' + varObjectImage + '" onclick="ViewRecipeFullView(' + varObjectID + ')" >';
                 if (userid != '') {
                     html += '<a class="li-icon-right"><img src="images/img05.jpg" alt="" class="li-iconimage-right"  onclick="javascript:RemoveIngredient(' + varObjectID + ');">';
                     html += '</img></a>';
                 }
                 html += '</li>'
             }
         }

         $('#gallery').html(html);
     }

     function sharefb() {
         var title = 'Plan It Meal';
         var url = window.location;
         
         var summery = 'This is grocery this week.';
         var image = 'http://www.planitmeal.com/newdesign/images/logo.jpg';
         var facebook = 'http://www.facebook.com/sharer.php?s=100&amp;p%5Btitle%5D=' + title;
         facebook += '&amp;p[summary]=' + summery;
         facebook += '&amp;p[url]=' + url;
         facebook += '&amp;&p[images][0]=' + image;
         //alert(facebook);
         //alert(facebook);
         $('#lnkFacebook').attr('href', facebook);
     }



    </script>

<script type="text/javascript">
    function getFile() {
        document.getElementById("<%=fImageUpload.ClientID%>").click();
        return false;
    }
    function readURL(input) {
        //alert(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                var object = e.target.result;
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/jpg;base64,', '');
                object = object.replace('data:image/gif;base64,', '');
                object = object.replace('data:image/jpeg;base64,', '');
                object = object.replace('data:image/bmp;base64,', '');
                object = object.replace('data:image/Icon;base64,', '');
                document.getElementById("<%=hdImage.ClientID%>").value = object;
                //alert(object);
            };
            reader.readAsDataURL(input.files[0]);
            return false;
        }
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<section id="bg_content">
    <div class="clearfix clear">
    	<ul class="ul04" style="margin-top:10px;">
          <li>
            <asp:ImageButton ID="btnEdit" ImageUrl="images/btn_edit.jpg"  runat="server" CssClass="save_button" Visible="false"
            OnClick="btn_Click"/>
          </li>
          <li>
            <asp:ImageButton src="images/btn_save.jpg" ID="btnSave"  runat="server" Visible="false" width="68" height="27"
            OnClick="btnSave_Click"  OnClientClick="return jQuery('.form').validationEngine('validate')"
            CausesValidation="false"
           /></li>
          <li class="li01">
           <asp:ImageButton ID="btnDelete" src="images/btn_del.jpg"  Visible="false" runat="server" OnClientClick="if (!confirm('Are you sure you want delete?')) return false;"
            onclick="btnDelete_Click1"></asp:ImageButton>
          
          </li>
        </ul>
    </div>
    <asp:Panel ID="panel3" Visible="true" runat="server">
	<h2><asp:Label runat="server" ID="lblMealPlanName"></asp:Label></h2>
    </asp:Panel>
    <asp:Panel ID="panel4" Visible="false" runat="server">
    <div class="ip-text">
        <asp:TextBox runat="server" ID="txtMealPlanName" placeholder="MealPlan Name" MaxLength="50"
                    CssClass="validate[required] input-trpr"></asp:TextBox>
                </div>
    </asp:Panel>
  	<section id="mainphoto">
  		<figure><img src="images/img03.jpg" class="imgRecipe" ID="Image2" runat="server" /></figure>
       <%-- <a id="lnkFacebook" runat="server" target="_blank" class="icon-fb-mp">
            <img ID="imgFB"  width="30" height="30" 
        src="images/icon-fb.png" 
              />
        </a>
        <a id="lnkGoogle" runat="server"  onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
          src="https://www.gstatic.com/images/icons/gplus-32.png" alt="Share on Google+"/></a>--%>
	</section>
    <div>
    <div class="basic" style="margin: 0 auto;" data-average="0" data-id="1"></div>
        
    </div>
 
    <ul style="float:left; width:100%">
        <li style="float:left; margin-right:5px ">
         <a id="lnkFacebook" runat="server" target="_blank" >
            <img ID="img1"  width="30" height="30" 
        src="images/icon-fb.png" 
              />
        </a>
        </li>
        <li style="float:left; margin-right:5px ">
            <a id="lnkGoogle" runat="server" target="_blank" ><img
          src="https://www.gstatic.com/images/icons/gplus-32.png" width="30" height="30"  alt="Share on Google+"/></a>
        </li>
        <li style="float:left;margin-right:5px ">
            <a id="lnkTwitter" runat="server"  target="_blank"><img src="images/twitter.png" width="30" height="30" /></a>
        </li>
        <li >
            <a id="lnkEmail" runat="server"  target="_blank"><img src="images/mail.png" width="30" height="30" /></a>
        </li>
    </ul>
  
    <section id="btn">
  		<figure>
            <asp:ImageButton ID="btnUpload" runat="server" ImageUrl="images/btn_add.jpg"
                            Visible="false" OnClientClick="return getFile()" />
        </figure>
	</section>
    <asp:Panel ID="panel2" Visible="true" runat="server">
        <p class="title01">Basic Info</p>
        <div class="clearfix clear mar_b10">
    	    <div class="bg01">
        	    <div class="bg02">
           	      <div class="bg03 clearfix">
              	    <p><asp:Label ID="lblBasic"  runat="server" ></asp:Label></p>
                  </div>
                </div>
            </div>
        </div>
        <p class="title01">Description</p>
        <div class="clearfix clear mar_b10">
    	    <div class="bg01">
        	    <div class="bg04">
            	    <div class="bg05 clearfix">
                	    <p><asp:Label runat="server" ID="lblDescription" CssClass="padding-text"></asp:Label></p>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding:5px;">
                    <input type="checkbox" id="chIsPublish"  disabled="true"  checked="true" runat="server" name="vehicle"
                    value="1" />Share with others
                    </div>
    </asp:Panel>
    <asp:Panel ID="panel1"  Visible="false"   runat="server" >
    <p class="title01">Basic Info</p>
     <div class="ip-text">
                      <asp:TextBox runat="server" ID="txtBasic" MaxLength="2000" placeholder="Basic Info"
                          CssClass="input-trpr"></asp:TextBox>
                  </div>
                  <p class="title01">Description</p>
                  <div class="ip-textarea">
                      <asp:TextBox runat="server" ID="txtDescription" MaxLength="2000" TextMode="MultiLine" CssClass="input-trpr" ></asp:TextBox>
                  </div>
                  <div style="padding:10px; font-size:16px">
                    <input type="checkbox" id="Checkbox1" checked="true"   runat="server" name="vehicle"
                    value="1" />Share with others
                  </div> 

    </asp:Panel>
    <div class="clearfix clear">
        <div class="bg01">
        	<div class="bg06">
            	<div class="bg07 clearfix">
                	<ul id="gallery" class="ulimg">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="fb-root"></div>
  <script>      (function (d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=208238106017076";
          fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));

    </script>
    <div id="mycomment" style="width:100%">
        <%--<div class="fb-comments" data-href="" data-width="400" data-numposts="10" data-colorscheme="light"></div>--%>
    </div>
    <script>
        //alert(getUrlVars()["RecipeId"]);
        if (getUrlVars()["MealPlanId"] != null) {
            var elemDiv = document.getElementById("mycomment");
            var markup = '';
            var widthWin = $(window).width() - 10;
            markup += '<div class="fb-comments" data-href="' + location.href.replace("/mobile") + '" data-num-posts="10" data-width="' + widthWin + '" style="margin-top:2em;"></div>';
            elemDiv.innerHTML = markup;
            FB.XFBML.parse(elemDiv);
        }
</script>   
</section>

<div style="overflow: hidden; height: 0px; width: 0px;">
        <asp:FileUpload type="file" id="fImageUpload" runat="server" onchange="readURL(this);" />
    </div>

    <script>
        function Rating() {
            var userid = '<%=Session["Userid"]%>';
            if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
                //alert(userid);
                $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
            } else {
                $(".basic").attr('data-average', '0');
            }
            if (userid != "") {
                var recipeID = getUrlVars()["MealPlanId"];
                //alert(recipeID);
                $(".basic").jRating({
                    step: true,
                    length: 5,
                    decimalLength: 1,
                    smallStarsPath: 'jquery/icons/small.png',
                    onSuccess: function (element, rate) {
                        document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                        if (recipeID != null)
                            submitRating(rate);
                    },
                    onError: function () {
                        alert('Error : please retry');
                    }
                });

            } else {
                $(".basic").jRating({
                    isDisabled: true
                });
            }
            //return false;
        }
        function submitRating(rate) {
            var mealPlanID = getUrlVars()["MealPlanId"];
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/Rating",
                data: "{'objectTypeID':'0','objectID':'" + parseInt(mealPlanID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                },
                error: function (msg) { alert(msg.d); }
            });
        }

        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }
    </script>
      
    <asp:HiddenField id="ratingStar" runat="server"/>
    <asp:HiddenField ID="hdRecipeId" runat="server"></asp:HiddenField>
    <asp:HiddenField ID="hdImage" runat="server" />
    <asp:HiddenField ID="checkUser" runat="server" />
    <asp:HiddenField ID="hdLinkImage" runat="server" />
</asp:Content>

